<template>
    <div class="back_contain_n visualImg">
        <div class="box">
            <div class="edit_part">
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">看板名称：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.boardName}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.boardName" maxlength="20" placeholder="请输入内容，最多输入20个字符" show-word-limit clearable></el-input>
					</div>
				</li>
                <li class="list">
                    <div class="part_nav part1">
                        <p class="firstTitle">访问地址：</p>
                    </div>
                    <div class="part_nav part2">
                        <p v-if="!isEdit">{{themeInfo.address}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.address" maxlength="60" placeholder="请输入网址"
								  show-word-limit clearable></el-input>
                        <p @click="addCopy()" class="_copy" title="复制地址"><i class="el-icon-document-copy"></i></p>
                    </div>
                </li>
                <li class="list">
                    <div class="part_nav part1">
                        <p class="firstTitle">所在位置：</p>
                    </div>
                    <div class="part_nav part2">
                        <p v-if="!isEdit">{{themeInfo.boardLocal}}</p>
                        <el-input class="change_input" v-else v-model="themeInfo.boardLocal" maxlength="20" placeholder="请输入内容，最多输入20个字符" show-word-limit clearable></el-input>
                    </div>
                </li>
                <div class="btns">
                    <p @click="isEdit = true" v-if="!isEdit" class="zll-botton download">编 辑</p>
                    <p @click="submitFun" v-else class="zll-botton">保 存</p>
                </div>
            </div>
            <div class="">
                <div class="topic_ topic_PPP">
					<div><i class="iconfont icon-guanlianbeijian"></i>数据维护</div>
					<div class="mine-add">
						<div @click="edit({},'add')">
							<i class="el-icon-circle-plus zll_icons"></i>
						</div>
					</div>
				</div>
                <div class="tableList" style="margin-top: 0;margin-bottom: 15px;">
                    <table>						
                        <tr>
                            <th width="100">序号</th>
							<th>主题</th>
							<th>数据</th>
							<th>单位</th>
							<th width="120">操作</th>
                        </tr>
						<tbody v-if="dataMaintainList.length > 0">
							<tr v-for="(item,index) in dataMaintainList" :key="index">
								<td>
									<p>{{ index + 1 }}</p>
								</td>
								<td>
									<p>{{ item.pageKey }}</p>
								</td>
								<td>
									<p>{{ item.pageContent }}</p>
								</td>
								<td>
									<p>{{ item.extendValue3 }}</p>
								</td>
								<td>
									<span @click="edit(item,'edit')">编辑</span>
									<span @click="deleteRow(item)">删除</span>
								</td>
							</tr>
						</tbody>
						<tbody v-else>
							<tr>
								<td class="noData" colspan="5">暂无数据</td>
							</tr>
						</tbody>
                    </table>
                </div>
            </div>

			<div class="zll-dialog dataMaintain">
				<popout :title="type == 'add'?'新增数据维护':'修改数据维护'" :visible.sync="addDialog" v-if="addDialog" class="minSize">
					<add ref="add" slot="content" :editData="editData" :type="type" @refreshData="refreshData"></add>
					<template slot="bottom">
						<p class="zll-botton" @click="()=>{this.$refs.add.submitForm('addForm')}">提 交</p>
					</template>
				</popout>
			</div>

            <div class="">
                <div class="topic_ topic_PPP">
					<div>
						<i class="iconfont icon-tupian"></i>金利荣誉
						<span>（图片轮播单张图片大小＜1M，像素1920*768，最多上传12张）</span>
					</div>
					<div>
						<span class="zll-botton download" v-if="!isImgSave" @click="isImgSave = true">编辑</span>
						<span class="zll-botton" v-else @click="saveCheckImage">保存</span>
					</div>
				</div>
                <div class="img_up">
                    <img-upload limit="12" :checkSize="1" :imgList="bgImages" :edit="isImgSave" :isImgSave="isImgSave" type="honor" :isMultiple="true"></img-upload>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import imgUpload from './imgUpload.vue'
import Add from './add'
export default {
    components: {imgUpload,Add},
    data() {
        return {
            addDialog: false,
			isEdit: false,
			isImgSave: false,
			themeInfo: { 
                address: '47.2.152.20:8080/mdhw/hdview',
				boardName:'',
				boardLocal:'',

            },

			chinese: {
				boardName: '看板名称',
				address: '看板地址',
				boardLocal: '看板位置'
			},
            dataMaintainList: [],

			bgImages:[],
			type: '',
			editData: {},
        }
    },
    mounted() {
        let self = this;
		self.getFirstList();
		self.getImagesList();
		self.getDataMaintains();
    },
    methods: {

		getImagesList() {
			let self = this;
			self.bgImages = [];
			self.$http({
				url: "/jinl/file/queryFileList",
				method: "post",
				params: {type: 'honor'}
			}).then(resp => {
				if (resp.success) {
					for (let data of resp.result) {
						data.fileCheck = parseInt(data.fileCheck);
						data.fileBlob = data.fileUrl;
						data.fileName = data.displayName;
						self.bgImages.push(data);
					}
				}
			});
		},

		getDataMaintains() {
			let self = this;
			self.dataMaintainList = [];
			self.$http({
				url: "/jinl/front/getFrontDisplay",
				method: "post",
				params: {type: 'data_center'}
			}).then(resp => {
				if (resp.success) {
					let frontDisplays = resp.result.frontDisplays || [];
					if (frontDisplays.length == 0) {
						return;
					}
					for (let data of frontDisplays) {
						let pageKey = data.pageKey;
						if (!pageKey || data.pageType != 'table') {
							continue;
						}
						self.dataMaintainList.push(data);
					}
					// self.bubbleSort(self.dataMaintainList);
				}
			});
		},

		saveCheckImage() {
			let params = [];
			for (let i = 0; i < this.bgImages.length; i++) {
				let obj = {id: this.bgImages[i].id, fileCheck: this.bgImages[i].fileCheck};
				params.push(obj);
			}
			let self = this;
			self.$http({
				url: "/jinl/file/updateFileCheckStatus",
				method: "post",
				data: JSON.stringify(params),
				dataType: 'json',
				contentType: "application/json",
			}).then(resp => {
				self.$message.success('保存成功');
				self.isImgSave = false;
			});
		},

		edit(val, type) {
			let self = this;
			self.addDialog = true;
			self.$nextTick(() => {
				self.type = type;
				self.editData = Object.assign({}, val);
			});

		},

        addCopy() {
            const oInput = document.createElement('input')
            oInput.value = this.themeInfo.address;
            document.body.appendChild(oInput)
            oInput.select()
            document.execCommand('Copy')
            this.$message({
                message: '复制成功',
                type: 'success'
            })
            oInput.remove()
        },

		deleteRow(rowData) {
			let self = this;
			self.$confirm('是否确认删除？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				self.$http({
					url: '/jinl/front/deleteFrontDisplay',
					method: "post",
					params: {id: rowData.id}
				}).then(resp => {
					if (resp.success) {
						self.getDataMaintains();
						self.$message.success('删除成功！');
						return
					}
					self.$message.error(resp.message);
				});
			});
		},

		refreshData() {
			this.getDataMaintains();
			this.addDialog = false;
		},

        submitFun() {
			let self = this;
			let frontDisplays = [];
			for (let key in self.chinese) {
				if (!self.themeInfo[key]) {
					self.$message.warning(self.chinese[key] + '不能为空！');
					return;
				}
				let vo = {pageKey: key, pageContent: self.themeInfo[key], pageType: key, pageAttr: 'data_center'};

				frontDisplays.push(vo);
			}
			let params = {frontDisplays: frontDisplays, pageAttr: 'data_center'};
			self.$http({
				url: "/jinl/front/addOrUpdateFrontDisplay",
				method: "post",
				data: JSON.stringify(params),
				dataType: 'json',
				contentType: "application/json",
			}).then(resp => {
				if (resp.success) {
					self.$message.success('修改成功！');
					self.isEdit = false;
					return;
				}
				self.getFirstList();
				self.$message.warning(resp.message);
			});
        },

		getFirstList() {
			let self = this;
			for (let key in self.themeInfo) {
				self.themeInfo[key] = '';
			}
			self.$http({
				url: "/jinl/front/getFrontDisplay",
				method: "post",
				params: {type: 'data_center'}
			}).then(resp => {
				if (resp.success) {
					let frontDisplays = resp.result.frontDisplays || [];
					if (frontDisplays.length == 0) {
						return;
					}
					for (let data of frontDisplays) {
						let pageKey = data.pageKey;
						if (!pageKey || !self.themeInfo.hasOwnProperty(pageKey)) {
							continue;
						}
						self.themeInfo[pageKey] = data.pageContent;
					}
				}
			});
		},
    },
}
</script>
<style lang="scss" scoped>
.topic_ {
    line-height: 40px;
    margin-top: 15px;
    i {
        margin-right: 10px;
    }
    span {
        color: #918d8d;
    }
	&.topic_PPP {
		display: flex;justify-content: space-between;
		.zll-botton {
			color: #fff;
			padding: 7px 15px;
		}
	}
}
.img_up {
    height: 100%;
}
.mine-add {
	display: flex;justify-content: flex-end;height: 34px;
	.zll_icons {
		color: #00d1d0;font-size: 20px;
	}
}
.visualImg {
    .box {
        margin-bottom: 15px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;flex-direction: column;
        .edit_part {
            width: 60%;
        }
        .btns {
            display: flex;
            margin-top: 20px;
            .zll-botton {
                width: 90px;
                font-size: 14px;
            }
        }
    }
    .list {
        border-top: 1px solid #f2f2f2;
        display: flex;align-items: center;
        &:nth-child(1) {
            border-top: 0;
        }
        .part2 {
            width: calc(100% - 150px);
            height: 100%;
            display: flex;
            align-items: center;
            padding: 15px 0;
            position: relative;
            p {
                font-size: 14px;
            }
            ._copy {
                color: #1890ff;
                cursor: pointer;
                font-size: 16px;
                margin-left: 20px;
                &:hover {
                    opacity: .7;
                }
            }
        }
        .part1 {
            width: 150px;
            height: 56px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            &._last {
                margin: 27px 0;
            }
            .firstTitle {
                font-size: 14px;
                text-align: left;
                padding-left: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 0;
            }
            .subTitle {
                font-size: 12px;
                padding-left: 20px;
                color: #999;
                margin: 5px 0 0 0;
            }
        }
    }
}
.tableList {
    margin-top: 20px;
    position: relative;
    table {
        width: 100%;
        border-collapse: collapse;
        border:1px solid #e6e6e6;
        text-align: center;
        table-layout: fixed;
        th {
            background: #ddd;
            color: #918d8d;
            padding: 3px;
            font-weight: normal;
            height: 26px;
            line-height: 26px;
        }
        td {
            padding: 3px;
            height: 26px;
            line-height: 26px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            p {
                padding: 0 5px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            span {
                color: #1890ff;
                cursor: pointer;
                margin: 0 5px;
                &:hover {
                    opacity: .8;
                }
            }
        }
		.noData {
			color: #918d8d;
		}
        tr {
            background: #FAFAFA;
            border: 1px solid #EBEEF5;
            &:nth-of-type(2n) {
                background: #fff;
            }
        }
    }
}
</style>
